<template>
	<!-- 
		<el-scrollbar  class="scrollbar">
			<el-menu>
				<el-menu-item index="1">首页</el-menu-item>
				<el-menu-item index="2">数据大屏</el-menu-item>
			<el-sub-menu index="3">
      <template #title>权限管理</template>
      <el-menu-item index="2-1">用户管理</el-menu-item>
      <el-menu-item index="2-2">角色管理</el-menu-item>
      <el-menu-item index="2-3">菜单管理</el-menu-item>
			</el-sub-menu>
			</el-menu>
		</el-scrollbar> 
	-->		
		<el-menu v-for="(item,index) in menuList" :key="item.path">
			<!-- 如果没有子路由，就不需要下拉菜单 -->
			<el-menu-item v-if="!item.children" :index="item.path" @click="goRoute">
				<el-icon>
						<component :is="item.meta.icons"></component>
					</el-icon>
				{{item.meta.title}}
			</el-menu-item>
			
			<!--有子路由 但只有一个的  -->
			<el-sub-menu  :index="item.path" v-else>
				<template #title>
					<el-icon>
						<component :is="item.meta.icons"></component>
					</el-icon>
					{{ item.meta.title }}
				</template>
				<!-- 递归组件 -->
				<Menu :menuList = "item.children"></Menu>
				<!-- v-for 循环 比较繁琐这个，如果子路由还有子路由就比较难写     -->
		    <!-- <el-menu-item v-for="(citem,index) in item.children" :key="citem.path">{{citem.meta.title}}</el-menu-item> -->
			</el-sub-menu>
		</el-menu>
</template>
<script setup lang="ts">

// 获取父组件传递的 路有数据
defineProps(['menuList']) 

const goRoute = (e) => {
	console.log(e.index);
	
	
}


</script>
<script lang="ts">
export default {
	name:'Menu'
}
</script>
<style lang="scss">



</style>
